<template>
  <div>
    <a-space direction="vertical">
      <div>
        共
        <a-typography-text type="primary"> 6 </a-typography-text>
        人
      </div>
      <a-input-tag
        :default-value="UserByData"
        style="width: '320px'; opacity: 1"
        placeholder="Please Enter"
        allow-clear
      />
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { findElectronicsealUser } from '@/api/contract-management/base-setting/E-signature/index';

  const UserByData = ref([]);
  const props = defineProps({
    eid: Object,
  });

  // const GetUserBy = async () => {
  //   const res = await findElectronicsealUser({
  //     id: Math.floor(props.eid.value),
  //   });
  //   res.forEach((item) => {
  //     UserByData.value.push(item.name);
  //   });
  // };
  // 优化前forEach循环，将查询结果中的name添加到UserByData.value中
  // 优化后map方法，将查询结果中的name映射到UserByData.value中。
  // const GetUserBy = async () => {
  //   const res = await findElectronicsealUser({
  //     id: Math.floor(props.eid.value),
  //   });
  //   UserByData.value = res.map((item) => item.name);
  // };
  // 优化前在调用 findElectronicsealUser 方法时，将 props.eid.value 的值传入了 id 属性；
  // 优化后，将 props.eid.value 的值赋值给 userId 变量，
  // 然后将 userId 变量传入了 id 属性，这样可以更清晰地表达代码的意图。
  // 解构赋值将item.name 的值赋值给 name 变量
  const GetUserBy = async () => {
    const userId = Math.floor(props.eid.value);
    const res = await findElectronicsealUser({ id: userId });
    UserByData.value = res.map(({ name }) => name);
  };
  GetUserBy();
</script>

<style scoped lang="less"></style>
